<template>
	<view class="feedback-container">
		<!-- 猜你想问区域 -->
		<view class="category-section">
			<view class="section-title">猜你想问</view>
			<view class="category-list">
				<view class="category-item" 
					v-for="(item, index) in categories" 
					:key="index"
					:class="{ active: selectedCategory === item.id }"
					@click="selectCategory(item.id)">
					<text class="category-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 问题反馈区域 -->
		<view class="feedback-section">
			<view class="section-title">问题反馈 @{{ getSelectedCategoryName() }}</view>
			<view class="feedback-input">
				<textarea 
					class="feedback-textarea" 
					placeholder="请输入反馈信息" 
					v-model="feedbackContent"
					maxlength="500"
					:show-confirm-bar="false"
				></textarea>
				<view class="char-count">{{ feedbackContent.length }}/500</view>
			</view>
		</view>

		<!-- 上传凭证区域 -->
		<view class="upload-section">
			<view class="section-title">上传凭证 (最多2张)</view>
			<view class="upload-list">
				<view class="upload-item" v-for="(image, index) in uploadedImages" :key="index">
					<image :src="image" class="uploaded-image" mode="aspectFill"></image>
					<view class="delete-btn" @click="deleteImage(index)">
						<uni-icons type="close" size="16" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="upload-btn" @click="chooseImage" v-if="uploadedImages.length < 2">
					<uni-icons type="plus" size="24" color="#999"></uni-icons>
					<text class="upload-text">选择图片</text>
				</view>
			</view>
		</view>

		<!-- 手机号区域 -->
		<view class="phone-section">
			<view class="section-title">手机号</view>
			<view class="phone-input">
				<input 
					class="phone-field" 
					placeholder="请输入您的手机号" 
					v-model="phoneNumber"
					type="number"
					maxlength="11"
				/>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<view class="submit-btn" @click="submitFeedback">
				<text class="submit-text">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: [
					{ id: 'function', name: '功能相关' },
					{ id: 'optimization', name: '优化反馈' },
					{ id: 'other', name: '其他' }
				],
				selectedCategory: 'function',
				feedbackContent: '',
				uploadedImages: [],
				phoneNumber: ''
			}
		},
		methods: {
			// 选择反馈分类
			selectCategory(categoryId) {
				this.selectedCategory = categoryId;
			},

			// 获取选中的分类名称
			getSelectedCategoryName() {
				const category = this.categories.find(item => item.id === this.selectedCategory);
				return category ? category.name : '功能相关';
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 2 - this.uploadedImages.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadedImages = this.uploadedImages.concat(res.tempFilePaths);
					}
				});
			},

			// 删除图片
			deleteImage(index) {
				this.uploadedImages.splice(index, 1);
			},

			// 提交反馈
			submitFeedback() {
				// 验证表单
				if (!this.feedbackContent.trim()) {
					uni.showToast({
						title: '请输入反馈信息',
						icon: 'none'
					});
					return;
				}

				if (!this.phoneNumber.trim()) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				// 验证手机号格式
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				// 显示提交中
				uni.showLoading({
					title: '提交中...'
				});

				// 模拟提交
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});

					// 清空表单
					this.feedbackContent = '';
					this.uploadedImages = [];
					this.phoneNumber = '';
					this.selectedCategory = 'function';

					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	.feedback-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 通用区域样式 */
	.category-section,
	.feedback-section,
	.upload-section,
	.phone-section {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	/* 分类选择区域 */
	.category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.category-item {
		padding: 15rpx 30rpx;
		border: 2rpx solid #eee;
		border-radius: 25rpx;
		background-color: #fff;
	}

	.category-item.active {
		border-color: #ff4444;
		background-color: #ff4444;
	}

	.category-text {
		font-size: 26rpx;
		color: #333;
	}

	.category-item.active .category-text {
		color: #fff;
	}

	/* 反馈输入区域 */
	.feedback-input {
		position: relative;
	}

	.feedback-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		background-color: #fff;
	}

	.char-count {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	/* 图片上传区域 */
	.upload-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.upload-item {
		position: relative;
		width: 160rpx;
		height: 160rpx;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.delete-btn {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 手机号输入区域 */
	.phone-input {
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.phone-field {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 提交按钮区域 */
	.submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background-color: #ff4444;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}
</style> 